<template>
    <el-table
        :data="tableData"
        :row-key="getRowKey"
        stripe
        border
        :highlight-current-row="false"
        class="phone-message-table bbx-normal-list-box"
    >
        <template slot="empty">
          <BaseListForNoData v-show="!isLoading" :notice-msg="'暂无数据'"></BaseListForNoData>
        </template>
        
        <template  v-for="column in columns">
            <el-table-column 
                v-if="column.show"
                :key="column.fieldName"
                :prop="column.fieldName"
                :label="column.displayName"
                min-width="180" 
                show-overflow-tooltip 
                :fixed="column.fixLeft || false"
            >
                <template slot-scope="{row}">
                    <template v-if="column.fieldName === 'messageType'">
                        {{ row.messageType == 1 ? '客户消息' : '内部消息' }}
                    </template>

                    <template v-else-if="column.fieldName === 'calledTime'">
                        {{ row.calledTime | fmt_datetime }}
                    </template>

                    <template v-else-if="column.fieldName === 'callingSpentTime'">
                        {{ row.callingSpentTime ? `${row.callingSpentTime}s` : ''}}
                    </template>

                    <template v-else-if="column.fieldName === 'callingState'">
                        <span :class="getState(row.callingState).className">
                            {{ getState(row.callingState).text}}
                        </span>
                    </template>
                    
                    <template v-else>
                        {{ row[column.fieldName] }}
                    </template>
                </template>
            </el-table-column>
        </template>
    </el-table>
</template>
<script>
export default {
    props:{
        columns:{
            type:Array,
            required:true
        },

        tableData:{
            type:Array,
            required:true
        },
        isLoading:{
            type:Boolean,
            required:true
        },
    },
    methods:{
        getRowKey(row) {
            return row.id;
        },

        getState(state){
            if(!state) return {}
            
            let text = ''
            let className = ''
            switch(state){
                case 'success': text = '呼叫成功';className = 'success-text';break;
                case 'fail': text = '呼叫失败';className = 'error-text';break;
            }

            return {
                text,
                className
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.phone-message-table{
    ::v-deep thead {
        color: #909399;
        font-weight: 500;
        th{
            background: #f5f5f5;
        }
    }

    .error-text {
        background: #FF4D4F;
    }
    .success-text {
        background: #00C853;
    }
    .loading-text {
        background: #FFA726;
    }

    .error-text,.success-text,.loading-text{
        padding:0px 6px;
        line-height:22px;
        border-radius: 11px;
        color:#fff;
        font-size: 12px;
    }
}
</style>